<template>
	<view class="banner" v-if="showBaner">
		<view class="proson_info">
			参加人员请认真阅读并提交相关信息:
		</view>
		<view class="form-item">
			<u-form-item :label="item.title" labelWidth="auto" :label-position='item.type == "select"?"left":"top"' v-for="(item,index) in formArr" :key='index'>
				 <u-radio-group v-model="item.answer" v-if="item.type == 'radio'" @change="groupChange(index)">
				 	<u-radio v-for="(jtem, i) in item.value" :key="i" :name="jtem" @change="radioChange">
				 		{{ jtem }}
				 	</u-radio>
				 </u-radio-group>
				 <view class="" v-if="item.type == 'input'">
				 	<u-input v-model="item.answer"  border="true" @input="descInput(index)" />
				 </view>
				 <view class="select" v-if="item.type == 'select'" @click="formArr[index].show = true" >
					{{ item.answer}}
					<u-icon name="arrow-down"></u-icon>
					<u-select v-model="formArr[index].show" :list="formArr[index].value" @confirm="confirm(index,$event)"></u-select>
				 </view>
				<u-checkbox-group v-if="item.type == 'checkbox'" >
				 	<u-checkbox v-model="jtem.checked" v-for="(jtem, i) in formArr[index].value" :key="i" :name="jtem.name" @change="checkboxChange" >
				 		{{ jtem.name }} 
				 	</u-checkbox>
				 </u-checkbox-group>
			 </u-form-item>
		</view>
		<view class="btn">
			<button type="default" @click="submitStr" style="color: #fff; background-color: #de0c1f;">活动报名</button>
		</view>
	</view>
	
</template>

<script>
export default {
	name:'activity_form',
	props:{
		form:{
			type:Array,
			default:String
		},
		investigateInfo:{
			type:String,
			default:''
		},
		title:{
			type:String,
			default:''
		}
	},
	watch:{
		formArr: {
			handler(newValue,oldValue){
				console.log(newValue,'newValue')
				this.$emit('changeForm',newValue)
			},
			deep:true
		},
		form: {
			handler(newValue,oldValue){
				console.log(newValue,'newValue22')
			},
			deep:true
		},
		ids:{
			handler(newValue,oldValue){
				console.log(newValue,'newValue')
			},
		},
		isSubmit:{
			handler(newValue,oldValue){
				console.log(newValue,'newValue')
			},
		}
	},
	data() {
		return {
			show:false,
			desc:'',
			conSelect:false,
			selectTxt:'',
			formArr:[],
			radioTxt:'',
			checkedTxt:'',
			inputTxt:'',
			showBaner:true,
			isSubmit:false,
			ids:0,
			checkboxList: [
				{
					name: '苹果',
					checked: false,
					disabled: false
				},
				{
					name: '雪梨',
					checked: false,
					disabled: false
				},
				{
					name: '柠檬',
					checked: false,
					disabled: false
				}
			],
			radioList: [
				{
					name: '鲜甜',
					disabled: false
				},
				{
					name: '麻辣',
					disabled: false
				}
			],
			radio: '',
			switchVal: true
		};
	},
	mounted(){
		if(this.form.length){
			this.formArr = this.form
			this.ids = this.formArr.pop()
			console.log(this.form,'formformformformformformformform')
		}
		
		console.log(this.title,'formformformformformformformform111')
	},
	methods:{
		groupChange(index){
			this.radioIndex = index
		},
		async submitStr(){
			console.log(this.formArr,'radioIndexradioIndexradioIndex')
			let that = this
			let checkedTxt = ''
			let checkedArr = []
			that.formArr.forEach((item,index)=>{
						if(item.type == "checkbox"){
							let checkBox = []
							item.value.forEach((jtem,jndex)=>{
								let check = []
								if(jtem.checked){
									check.push(jtem.name)
									checkBox.push(...check).toString()
								}
							})
							item.answer = checkBox.toString()
						}
					
			})
			// that.formArr.forEach((item,index)=>{
			// 		if(item.type == "checkbox"){
			// 			let check = []
			// 			item.value.forEach((jtem,jndex)=>{
			// 				if(jtem.checked){
			// 					check.push(jtem.name)
			// 					checkedArr.push(...check)
			// 					checkedTxt = [...new Set(checkedArr)].toString()
			// 				}
			// 			})
			// 			item.answer = checkedTxt
			// 		}else if(item.type == "input"){
			// 			item.answer = that.inputTxt.trim()
			// 		}else if(item.type == "select"){
			// 			let value = []
			// 			let selectArr = []
			// 			Object.assign(item,{show:false})
			// 			console.log(item,'itemitemitemitemitemitem1111')
			// 			item.value.forEach((jtem,index)=>{
			// 			  let valueObj1 = {}
			// 			  valueObj1.value = index
			// 			  valueObj1.label = jtem
			// 			  value.push(valueObj1)
			// 			  item.value = []
			// 			  item.value.push(...value)
			// 			})
			// 			item.answer = item.value[0].label  
			// 		}

			// })
			that.isSubmit = that.formArr.every((item,index)=>{
				 return item.answer !== ''
			})
			if(that.isSubmit){
					let data = {
						activity_id: this.ids,
						form_json: this.formArr
					}
					console.log(that.isSubmit,data,'that.isSubmit')
				let res = await this.$api.joinActivity(data);
					if(res.code){
						// uni.showToast({
						// title: res.msg
						// });
						//
						// setTimeout(()=>{
						// 	uni.navigateBack({
						// 		data:1
						// 	})
						// },2000)

            uni.$emit("activitySuccess",res.data)

					}else {
						uni.showToast({
						title: res.msg,
						icon: 'none'
						});
						//this.showBaner = false
						// setTimeout(()=>{
						// 	uni.navigateBack({
						// 		data:1
						// 	})
						// },2000)
					}
			}else{
				uni.showToast({
				title: '请完成全部活动内容后进行提交',
				icon: 'none'
				});
				that.isSubmit = false				
			}

		},
		
		
		
		confirm(index,e){
			this.conSelect = true;
			this.formArr.forEach((item,j)=>{
				if(item.type == "select"){
					this.formArr[index].answer = e[0].label
				}
			})
			console.log(this.formArr,'answeransweransweransweranswer')
		},
		checkboxChange(e){
			let checked = []
		},
		radioChange(e){
			this.radioTxt = e
		},
		descInput(){
			console.log(this.inputTxt,'descInput');
			
		}
	}
};
</script>
<style lang="scss">
	.banner {
		background-color: #FFFFFF;
		width: 85%;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 120rpx;
		margin: 20rpx auto;
		margin-bottom: 50rpx;
		position: relative;
		.form-item{
		}
		.btn{
			position: absolute;
			width: 100%;
			bottom: 30rpx;
			left: 0;
			padding: 0 30rpx;
			color:#fff;
		}
		.title{
			font-size: 30rpx;
			color: #D9001B;
			font-weight: bold;
		}
		.u-input{
			width: 100rpx !important;
		}
		.textarea_box{
			position: relative;
			.textarea{
				height: 100rpx;
				width: 100%;
				background-color: #999;
				padding: 20rpx 0;
			}
			.num{
				position: absolute;
				display: inline-block;
				bottom: 0;
				right: 0;
			}
		}
		.select{
			width: 150rpx;
			display: flex;
			justify-content: space-around;
			border: 2rpx solid #dcdfe6;
		}
		.proson_info{
			font-size: 32rpx;
			color: #D9001B;
		}
	}
</style>
	}
</style>